<template>
 <div class="extendable-list-item" :class="{active: active}">
   <div class="item-content">
      <slot></slot>
   </div>
   <div v-show="isShow">
   <el-popover :trigger="trigger" placement="right" :width="width">
     <template #reference>
       <div class="icon">
         <el-icon><MoreFilled /></el-icon>
       </div>
     </template>
     <template #default>
       <div class="extend-content">
        <slot name="extend-content"></slot>
       </div>
     </template>
   </el-popover>
  </div>
   <!-- <el-menu
    class="el-menu-demo"
    mode="horizontal"
  >
  <el-sub-menu index="2-4">
        <template #title>item four</template>
        <el-menu-item index="2-4-1">item one</el-menu-item>
        <el-menu-item index="2-4-2">item two</el-menu-item>
        <el-menu-item index="2-4-3">item three</el-menu-item>
      </el-sub-menu>

  </el-menu> -->

 </div>
</template>

<script lang="ts" setup>
const props = withDefaults(defineProps<{
  active: boolean,
  width: number,
  isShow?: boolean,
  trigger?: 'click' | 'hover',
}>(), {
  active: false,
  trigger: 'click',
  isShow: true,
})
</script>

<style scoped lang="scss">
.extendable-list-item {
  padding: 6px;
  font-size: 14px;
  color: #303133;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.extendable-list-item:hover {
  background: #E8F2FF;
  color: var(--el-color-primary);
}

.active {
  background: #E8F2FF;
  color: var(--el-color-primary);
}

.icon {
  transform: rotate(90deg);
}

.extend-content {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
